<?php
if (isset($judul_halaman))
    $this->load->view('header1', array('judul_halaman' => $judul_halaman));
//$this->load->view('leftSideBar1',array('judul_halaman'=>$judul_halaman));
else
    $this->load->view('header1');
//$this->load->view('leftSideBar1');
?>
<body>
    <div class="container-fluid">
        <div class="row">
            <?php $this->load->view('leftSideBar1'); ?>
            <div class="col-sm-8 col-sm-offset-4 col-md-9 col-md-offset-3 main" style="overflow: hidden">
                <!--                <h1>abc</h1>-->
                <?php $this->load->view('menu_atas_1'); ?>
                <div class="row placeholders">
                    <?php
                    if (isset($list_braintest)) {
                        $counter = 0;
                        if (count($list_braintest) > 0) {
                            ?>
                            <ul class="timeline">
                                <?php
                                if (false)
                                    foreach ($list_braintest as $braintest) {
                                        $counter++;
                                        ?><!--                        <li><div class="tldate">Apr 2014</div></li>-->
                                        <li <?php if ($counter % 2 == 0) echo 'class="timeline-inverted"'; ?>>
                                            <div class="tl-circ"></div>
                                            <div class="timeline-panel" style="cursor: pointer" onclick="location = '<?= base_url(); ?>braintest/kerjakan?id=<?= $braintest->id_braintest; ?>'">
                                                <div class="tl-heading">
                                                    <h4><?= $braintest->nama_braintest; ?></h4>
                                                    <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> <?= $braintest->waktu_mulai; ?></small></p>
                                                </div>
                                                <div class="tl-body">
                                                    <p>Belum Dikerjakan</p>
                                                </div>
                                            </div>
                                        </li><?php }
                                ?></ul>
                    <div class="pilih_quiz" style="">
                                <table style="" align="center">
                                    <?php
                                    $counter = 0;

                                    foreach ($list_braintest as $braintest) {
                                        //$timeLineClass = "timeline-inverted";
                                        $timeLineClass = "soal_kiri";
                                        $counter++;
                                        ?>
                                        <tr>
                                            <?php
                                            if ($counter % 2 == 0) {
                                                $timeLineClass = "soal_kanan";
                                                echo '<td></td><td class="garis_tegak"><div class="nomor_quiz">' . $counter . '</div></td>';
                                            }
                                            ?>
                                            <td>
                                                <div class="<?php echo $timeLineClass; ?>" onclick="location = '<?= base_url(); ?>braintest/kerjakan?id=<?= $braintest->id_braintest; ?>'">
                                                    <h4><?= $braintest->nama_braintest; ?></h4>
                                                    <p style="padding: 3px">
                                                        <small class="text-muted">
                                                            <i class="glyphicon glyphicon-time"></i> <?= $braintest->waktu_mulai; ?>
                                                        </small>
                                                    </p>
                                                    <p style="padding: 3px;">Belum Dikerjakan</p>
                                                </div></td>
                                            <?php
                                            if ($counter % 2 == 1) {
                                                echo '<td class="garis_tegak"><div class="nomor_quiz">' . $counter . '</div></td><td></td>';
                                            }
                                            ?>
                                        </tr>
                                        <?php
                                    }
                                    ?>
                                </table>
                            </div>
                            <?php
                        }
                    }
                    ?>
                </div>
            </div>
        </div>

    </div>
    <style>
        .pilih_quiz{
            text-align: center;
            alignment-adjust: central;
            alignment-baseline: central;
height: 85%;
overflow-y: scroll
        }
        .nomor_quiz{
            border: solid rgb(102,102,102) 5px;
            width: 40px;
            height: 40px;
            border-radius: 25px;
            margin-top: 30px;
            font-size: 25px;
            font-weight:  900;
            background-color: white;
        }
        .garis_tegak{
            //border-left: solid rgb(153,153,153) 8px;
            //border-right:  solid rgb(102,102,102) 8px;
            text-align: center;
            vertical-align: top;
            background: url('assets/gambar/pemisah_timeline.png') center repeat-y;
        }
        .soal_kanan{
            text-align: right;
            padding-right:  90px;
            padding-top: 5px;
            background: #fff;
            width: 320px;
            height: 110px;
            background: url('assets/gambar/kotaksajakanan.png') no-repeat center;
            cursor: pointer;

        }
        .soal_kanan:hover{
            background: url('assets/gambar/kotaksajamerahkanan.png') no-repeat center;
        }
        .soal_kiri{
            padding-top: 5px;
            text-align: left;
            padding-left: 90px;
            background: #fff;
            width: 320px;
            height: 110px;
            background: url('assets/gambar/kotaksaja.png') no-repeat center;
            cursor: pointer;
        }
        .soal_kiri:hover{
            background: url('assets/gambar/kotaksajamerah.png') no-repeat center;
        }
        /*        img { border: 0; max-width: 100%; }*/

        .page-header h1 {
            font-size: 3.26em;
            text-align: center;
            color: #efefef;
            text-shadow: 1px 1px 0 #000;
        }

        /** timeline box structure **/
        .timeline {
            list-style: none;
            padding: 20px 0 20px;
            position: relative;
        }

        .timeline:before {
            top: 0;
            bottom: 0;
            position: absolute;
            content: " ";
            width: 3px;
            background-color: #eee;
            left: 50%;
            margin-left: -1.5px;
        }

        .tldate {
            display: block;
            width: 200px;
            background: #414141;
            border: 3px solid #212121;
            color: #ededed;
            margin: 0 auto;
            padding: 3px 0;
            font-weight: bold;
            text-align: center;
            -webkit-box-shadow: 0 0 11px rgba(0,0,0,0.35);
        }

        .timeline li {
            margin-bottom: 25px;
            position: relative;
        }
        /** timeline panels **/
        .timeline li .timeline-panel {
            width: 46%;
            float: left;
            background: #fff;
            border: 1px solid #d4d4d4;
            padding: 20px;
            position: relative;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
            -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
        }

        /** panel arrows **/
        .timeline li .timeline-panel:before {
            position: absolute;
            top: 26px;
            right: -15px;
            display: inline-block;
            border-top: 15px solid transparent;
            border-left: 15px solid #ccc;
            border-right: 0 solid #ccc;
            border-bottom: 15px solid transparent;
            content: " ";
        }

        .timeline li .timeline-panel:after {
            position: absolute;
            top: 27px;
            right: -14px;
            display: inline-block;
            border-top: 14px solid transparent;
            border-left: 14px solid #fff;
            border-right: 0 solid #fff;
            border-bottom: 14px solid transparent;
            content: " ";
        }
        .timeline li .timeline-panel.noarrow:before, .timeline li .timeline-panel.noarrow:after {
            top:0;
            right:0;
            display: none;
            border: 0;
        }

        .timeline li.timeline-inverted .timeline-panel {
            float: right;
        }

        .timeline li.timeline-inverted .timeline-panel:before {
            border-left-width: 0;
            border-right-width: 15px;
            left: -15px;
            right: auto;
        }

        .timeline li.timeline-inverted .timeline-panel:after {
            border-left-width: 0;
            border-right-width: 14px;
            left: -14px;
            right: auto;
        }
        /** media queries **/
        @media (max-width: 991px) {
            .timeline li .timeline-panel {
                width: 44%;
            }
        }

        @media (max-width: 700px) {
            .page-header h1 { font-size: 1.8em; }

            ul.timeline:before {
                left: 40px;
            }

            .tldate { width: 140px; }

            ul.timeline li .timeline-panel {
                width: calc(100% - 90px);
                width: -moz-calc(100% - 90px);
                width: -webkit-calc(100% - 90px);
            }

            ul.timeline li .tl-circ {
                top: 22px;
                left: 22px;
                margin-left: 0;

            }
            ul.timeline > li > .tldate {
                margin: 0;
            }

            ul.timeline > li > .timeline-panel {
                float: right;
            }

            ul.timeline > li > .timeline-panel:before {
                border-left-width: 0;
                border-right-width: 15px;
                left: -15px;
                right: auto;
            }

            ul.timeline > li > .timeline-panel:after {
                border-left-width: 0;
                border-right-width: 14px;
                left: -14px;
                right: auto;
            }
        }

    </style>
    <script>
        $(window).on('scroll', function() {
            $timeline_block.each(function() {
                if ($(this).offset().top <= $(window).scrollTop() + $(window).height() * 0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden')) {
                    $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
                }
            });
        });
    </script>
    <?php
    $this->load->view('footer1');
    ?>